﻿@page "/color-picker/custom"

@using Syncfusion.Blazor.Inputs
@inherits SampleBaseComponent

<SampleDescription>
    <p>This sample demonstrates how to customize the color palettes with different types and styles.</p>
</SampleDescription>
<ActionDescription>
   <p>In this sample,</p>
       <ul><li>Select the shirt color from different customized palettes. It contains circle, square, rounded edge, and multiple scroll palettes.</li>
           <li>Using the <a target="_blank" href="https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_Value">Value</a> property, set the color value to picker and palette initially.</li>
        </ul>
       <p>More information about Blazor ColorPicker component can be found in this <a target="_blank" href="https://blazor.syncfusion.com/documentation/color-picker/getting-started/">documentation</a> section.</p>
</ActionDescription>

<div class="control-section">
    <div id="custom-control">
        <div class="row">
            <div id="e-shirt-preview" style="@colorValue"></div>
        </div>
        <div id="custom-content" class="row">
            <div class="col-xs-12 col-sm-12 col-lg-6 col-md-6 e-circle-wrap">
                <SfColorPicker Mode="Syncfusion.Blazor.Inputs.ColorPickerMode.Palette" CssClass="circle-palette" ModeSwitcher="false" Inline="true" ShowButtons="false" Columns="4" PresetColors="@circlePaletteColors" ValueChange="onChange"></SfColorPicker>
            </div>
            <div class="col-xs-12 col-sm-12 col-lg-6 col-md-6 e-rounded-wrap">
                <SfColorPicker Mode="Syncfusion.Blazor.Inputs.ColorPickerMode.Palette" CssClass="rounded-palette" ModeSwitcher="false" Inline="true" ShowButtons="false" Columns="5" PresetColors="@roundPaletteColors" ValueChange="onChange"></SfColorPicker>
            </div>
            <div class="col-xs-12 col-sm-12 col-lg-6 col-md-6 e-square-wrap">
                <SfColorPicker Mode="Syncfusion.Blazor.Inputs.ColorPickerMode.Palette" CssClass="square-palette" ModeSwitcher="false" Inline="true" ShowButtons="false" Columns="8" PresetColors="@squarePaletteColors" ValueChange="onChange"></SfColorPicker>
            </div>
            <div class="col-xs-12 col-sm-12 col-lg-6 col-md-6 e-scroll-wrap">
                <SfColorPicker Mode="Syncfusion.Blazor.Inputs.ColorPickerMode.Palette" CssClass="scroll-palette" ModeSwitcher="false" Inline="true" ShowButtons="false" Columns="4" PresetColors="@scrollablePaletteColors" ValueChange="onChange"></SfColorPicker>
            </div>
        </div>
    </div>
</div>
@code {
    private string colorValue = "background-color: #008000";
    private void onChange(ColorPickerEventArgs args)
    {
        colorValue = "background-color: " + args.CurrentValue.Hex;
    }
    private Dictionary<string, string[]> circlePaletteColors = new Dictionary<string, string[]>() {
        { "Custom", new string[] {"#f44336", "#e91e63", "#9c27b0", "#673ab7", "#2196f3", "#03a9f4", "#00bcd4",
                "#009688", "#8bc34a", "#cddc39", "#ffeb3b", "#ffc107" } }
    };
    private Dictionary<string, string[]> roundPaletteColors = new Dictionary<string, string[]>() {
        { "Custom", new string[] {"#ff6900", "#fcb900", "#7bdcb5", "#00d084",
                "#8ed1fc", "#0693e3", "#abb8c3", "#eb144c", "#f78da7", "#9900ef"} }
    };
    private Dictionary<string, string[]> squarePaletteColors = new Dictionary<string, string[]>() {
        { "Custom", new string[] {"#b80000", "#db3e00", "#fccb00", "#008b02",
                "#006b76", "#1273de", "#004dcf", "#5300eb", "#eb9694", "#fad0c3", "#fef3bd", "#c1e1c5",
                "#bedadc", "#c4def6", "#bed3f3", "#d4c4fb"} }
    };
    private Dictionary<string, string[]> scrollablePaletteColors = new Dictionary<string, string[]>() {
        { "Custom1", new string[] {"#ef9a9a", "#e57373", "#ef5350",
                "#f44336", "#f48fb1", "#f06292", "#ec407a", "#e91e63", "#ce93d8",
                "#ba68c8", "#ab47bc", "#9c27b0", "#b39ddb", "#9575cd", "#7e57c2", "#673AB7"} },
        { "Custom2", new string[] {"#9FA8DA", "#7986CB", "#5C6BC0", "#3F51B5",
                "#90CAF9", "#64B5F6", "#42A5F5", "#2196F3", "#81D4FA", "#4FC3F7", "#29B6F6", "#03A9F4",
                "#80DEEA", "#4DD0E1", "#26C6DA", "#00BCD4"} },
        { "Custom3", new string[] {"#80CBC4", "#4DB6AC", "#26A69A", "#009688",
                "#A5D6A7", "#81C784", "#66BB6A", "#4CAF50", "#C5E1A5", "#AED581", "#9CCC65", "#8BC34A", "#E6EE9C",
                "#DCE775", "#D4E157", "#CDDC39"} },
        { "Custom4", new string[] {"#FFF59D", "#FFF176", "#FFEE58", "#FFEB3B",
                "#FFE082", "#FFD54F", "#FFCA28", "#FFC107", "#FFCC80", "#FFB74D", "#FFA726", "#FF9800", "#FFAB91",
                "#FF8A65", "#FF7043", "#FF5722"} }
    };
}
<style>
    /* Common sample level styles */
    #custom-control {
        margin: auto 0;
        text-align: center;
    }
    #custom-control .col-lg-6 {
        margin-bottom: 20px;
    }
    body:not(.mobile) #custom-control .col-lg-6.e-circle-wrap {
        width: 25%;
    }
    body:not(.mobile) #custom-control .col-lg-6.e-square-wrap {
        margin-top: 37px;
        width: 22%;
    }
    body:not(.mobile) #custom-control .col-lg-6.e-rounded-wrap {
        margin-top: 35px;
        width: 20%;
    }
    body:not(.mobile) #custom-control .col-lg-6.e-scroll-wrap {
        width: 32%;
    }
    /* Preview area styles */
    #custom-control #e-shirt-preview {
        background: transparent url("images/color-picker/shirt.png") no-repeat;
        height: 320px;
        margin: 20px auto;
        display: inline-block;
        width: 400px;
        background-color: rgb(244, 67, 54);
    }
    #custom-control #e-shirt-preview {
        margin-left: -21%;
        width: 320px;
    }
    .highcontrast #custom-control #e-shirt-preview {
        background: transparent url("images/color-picker/shirt-highcontrast.png") no-repeat;
        background-color: rgb(244, 67, 54);
    }
    /* Common sample level styles for mobile */
    .mobile #custom-control .col-lg-6 {
        width: 55%;
    }
    .mobile #custom-control .col-lg-6.e-square-wrap {
        margin-top: 37px;
    }
    .mobile #custom-control .col-lg-6.e-rounded-wrap {
        margin-top: 35px;
    }
    @@media only screen and (min-width: 768px) {
        #custom-control .col-sm-12 {
            width: 25%;
        }
    }
    #custom-control #custom-content {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
    }
    #custom-control #custom-content .col-xs-12 {
        flex: 0 0 auto;
    }
    /* Circle palette customization */
    .circle-palette .e-container .e-palette .e-tile {
        border: 0;
        height: 32px;
        width: 32px;
        border-radius: 20px;
        margin: 4px;
    }
    .mobile .circle-palette .e-container .e-palette .e-tile {
        height: 32px;
        width: 32px;
    }
    .circle-palette .e-container .e-palette .e-tile:hover {
        box-shadow: none;
        transform: scale(1.2);
        transition: transform .2s ease-out;
    }
    .circle-palette .e-container .e-palette .e-tile::before {
        content: '';
        height: 32px;
        width: 32px;
        border-radius: 20px;
        display: inline-block;
        transform: scale(0);
        transition: transform 1.2s ease-in;
    }
    .circle-palette .e-container .e-palette .e-tile.e-selected::before {
        transform: scale(0.8);
        background-color: #fff;
        transition: transform .2s ease-out;
    }
    .circle-palette .e-container,
    .scroll-palette .e-container {
        background-color: transparent;
        border-color: transparent;
        box-shadow: none;
    }
    /* Scrollable palette customization */
    .scroll-palette .e-container .e-custom-palette.e-palette-group,
    .mobile .scroll-palette .e-container .e-custom-palette.e-palette-group {
        height: 125px;
    }
    .scroll-palette .e-container .e-palette .e-tile {
        border: 0;
        color: #fff;
        line-height: 24px;
        font-size: 16px;
        height: 24px;
        width: 35px;
        margin-top: 2px;
        margin-left: 10px;
    }
    .mobile .scroll-palette .e-container .e-palette .e-tile {
        height: 24px;
        width: 35px;
    }
    .scroll-palette .e-container .e-palette .e-tile.e-selected::before {
        content: '\e933';
    }
    .fabric .scroll-palette .e-container .e-palette .e-tile.e-selected::before,
    .bootstrap .scroll-palette .e-container .e-palette .e-tile.e-selected::before,
    .highcontrast .scroll-palette .e-container .e-palette .e-tile.e-selected::before {
        content: '\e7ff';
    }
    .bootstrap4 .scroll-palette .e-container .e-palette .e-tile.e-selected::before {
        content: '\e718';
    }
    .highcontrast .e-container .e-palette {
        border-bottom-color: transparent;
    }
    .scroll-palette .e-container .e-palette .e-tile {
        font-family: 'e-icons';
        font-style: normal;
        font-variant: normal;
        font-weight: normal;
        text-transform: none;
    }
    /* Square palette customization */
    .square-palette .e-container .e-palette .e-tile,
    .mobile .square-palette .e-container .e-palette .e-tile {
        width: 20px;
        height: 20px;
    }
    .square-palette .e-container .e-custom-palette .e-palette,
    .rounded-palette .e-container .e-custom-palette .e-palette {
        padding: 5px;
    }
    /* Rounded corner palette customization */
    .rounded-palette .e-container .e-palette .e-tile {
        border-radius: 4px;
        margin: 3px;
        height: 16px;
        width: 16px;
    }
    .rounded-palette .e-container .e-palette .e-tile.e-selected::before {
        content: '';
        background-color: inherit;
        border-radius: 4px;
        display: inline-block;
        transform: scale(1.2);
        opacity: 0.2;
        height: 15px;
        width: 15px;
    }
    .mobile .rounded-palette .e-container .e-palette .e-tile {
        height: 16px;
        width: 16px;
    }
    .rounded-palette .e-container .e-palette .e-tile:hover,
    .scroll-palette .e-container .e-palette .e-tile:hover {
        box-shadow: none;
    }
    .circle-palette .e-container .e-palette .e-tile.e-selected,
    .rounded-palette .e-container .e-palette .e-tile.e-selected,
    .square-palette .e-container .e-palette .e-tile.e-selected,
    .scroll-palette .e-container .e-palette .e-tile.e-selected {
        outline: none;
    }
    .e-container.e-color-palette {
        width: auto !important
    }
</style>